<!-- 导航 -->
<template>
  <div class="nav_list">
    <div class="nav" ref="menu">
      <div class="nav_btn">
        <div class="logo">
          <router-link :href="'https://www.ansjy.cn'" to="/">
            <img src="../../assets/img/logo1.png" alt="岸上教育">
          </router-link>
        </div>
        <div class="navs">
          <div>
              <nuxt-link :href="'https://www.ansjy.cn/exam/' + 2340 + '/' + 0" :to="'/exam/' + 2340 + '/' + 0" :class="(navType === 'exam-id-cid' || type === 'exam-id-cid') ? 'active' : ''">
                <p>招考公告</p>
                <p :class="(navType === 'exam-id-cid' || type === 'exam-id-cid') ? 'active' : ''"></p>
              </nuxt-link>
              <nuxt-link :href="'https://www.ansjy.cn' + '/shore'" to="/shore" :class="navType === 'shore' ? 'active' : ''">
                <p>备考打卡</p>
                <p :class="navType === 'shore' ? 'active' : ''"></p>
              </nuxt-link>
              <nuxt-link :href="'https://www.ansjy.cn' + '/testData/' + 0" :to="'/testData/' + 0" :class="navType === 'testData-id' ? 'active' : ''">
                <p>备考资料</p>
                <p :class="navType === 'testData-id' ? 'active' : ''"></p>
              </nuxt-link>
              <nuxt-link :href="'https://www.ansjy.cn' + '/freeLesson/' + id + '/' + play" :to="'/freeLesson/' + id + '/' + play" :class="navType === 'freeLesson-id-play' ? 'active' : ''">
                <p>免费课程</p>
                <p :class="navType === 'freeLesson-id-play' ? 'active' : ''"></p>
              </nuxt-link>
              <nuxt-link :href="'https://www.ansjy.cn' + '/about'" to="/about" :class="navType === 'about' ? 'active' : ''">
                <p>关于我们</p>
                <p :class="navType === 'about' || navType === 'detail-id' ? 'active' : ''"></p>
              </nuxt-link>
              <nuxt-link :href="'https://www.ansjy.cn' + '/give'" to="/give" :class="navType === 'give' ? 'active' : ''">
                <p>招商加盟</p>
                <p :class="navType === 'give' ? 'active' : ''"></p>
              </nuxt-link>
          </div>
          <div>
            <!-- v-if="hshow" -->
            <div v-if="hshow">
              <a>{{user}}</a>
              <a @click="layOut()">退出</a>
            </div>
            <a v-else @click="login()">登录</a>
          </div>
        </div>
        <router-link class="getInfo" @mouseover="moveUp()" tag="div" to="/getPull">
          <img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/getInfo.gif" alt="岸上教育">
        </router-link>
      </div>
    </div>
    <div class="nav_flow"></div>
  </div>
</template>

<script>
export default {
  // async asyncData({app, params}) {
  //   console.log(123)
  // },
  data () {
    return {
      // isLogin: false
      navType: '',
      user: '',
      hshow: false,
      type: '',
      videoList: [],
      page: 1,
      page_count: 15,
      id: 0,
      play: 0
    }
  },

  created () {
  },

  mounted () {
    // console.log(process.env.BASE_URL)
    setTimeout(() => {
      (function(m, ei, q, i, a, j, s) {
        m[i] = m[i] || function() {
            (m[i].a = m[i].a || []).push(arguments)
        };
        j = ei.createElement(q),
            s = ei.getElementsByTagName(q)[0];
        j.async = true;
        j.charset = 'UTF-8';
        j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
        s.parentNode.insertBefore(j, s);
    })(window, document, 'script', '_MEIQIA');
    _MEIQIA('entId', 156628);
    }, 1000)
    this.navType = this.$route.name
    console.log(this.navType)
    this.type = localStorage.getItem('type')
    if (this.navType === 'index') {
      this.type = 'index'
    } else if (this.navType === 'shore') {
      this.type = ''
    } else if (this.navType === 'testData-id') {
      this.type = ''
    } else if (this.type === 'testData-id1' && this.navType === 'examInfor-id-cid') {
      this.navType = 'testData-id'
    } else if (this.navType === 'freeLesson-id-play') {
      this.type = ''
    } else if (this.navType === 'about') {
      this.type = ''
    } else if (this.navType === 'give') {
      this.type = ''
    } else if (this.navType === 'courseInfor-id') {
      this.type = ''
    }
    this.user = localStorage.getItem('user')
    if (this.user === null) {
      this.hshow = false
    } else {
      this.hshow = true
    }
    this.getVideo()
    // 获取路由以便登录使用
    window.addEventListener('scroll', this.menu)
  },

  components: {},

  computed: {},

  methods: {
    // 退出登录
    layOut () {
      var token = localStorage.getItem('token')
      if (!token) {
        this.hshow = false
      } else {
        this.$http.post('/login/loginOut', {
          token: token
        }).then((res) => {
          if (res.data.code === 1) {
            this.$message({
              message: '成功退出',
              type: 'success'
            })
            localStorage.clear()
            this.hshow = false
          } else if (res.data.code === -3) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            localStorage.clear()
            this.hshow = false
          }
        })
      }
    },
    // 免费视频
    getVideo () {
      var tokens = localStorage.getItem('token')
      this.$http.post('/link/getVideolists', {
        // eslint-disable-next-line
        token: tokens ? tokens : '',
        page: this.page,
        page_count: this.page_count
      }).then((res) => {
        this.videoList = res.data.data
        this.id = this.videoList[0].id
        this.play = this.videoList[0].is_limit_play
      })
    },
    // 监听滚动
    menu () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scroll > 100) {
        this.$refs.menu.style.backgroundColor = 'rgba(255,255,255,0.94)'
      }
    },
    // 登录
    login () {
      let baseUrl = ''
      localStorage.setItem('path', this.$route.name)
      let hostnames = location.hostname
      if (hostnames === 'www.ansjy.cn') {
        baseUrl = 'https://apis.ansjy.cn'
      } else if (hostnames === 'www.t.ansjy.cn') {
        baseUrl = 'https://apis.t.ansjy.cn'
      } else if (hostnames === 'ansjy.cn') {
        baseUrl = 'https://apis.ansjy.cn'
      }
      localStorage.setItem('href', window.location.href)
      window.location.href = baseUrl + '/login/wechat'
    }
  }
}

</script>
<style lang='scss' scoped>
.nav{
  width: 100%;
  height: 62px;
  top: 0px;
  position: fixed;
  z-index: 2;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
}
.nav_flow{
  width: 100%;
  height: 62px;
}
.nav_btn{
  // width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 0px 40px;
}
.navs{
  width: 100%;
  height: 62px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.navs div{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navs div:last-child a:first-child{
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navs div a{
  height: 62px;
  line-height: 62px;
  cursor: pointer;
  margin-left: 35px;
  text-decoration: none;
}
.navs div a p{
  height: 40px;
  line-height: 62px;
  text-align: center;
}
.navs div a p:last-child.active{
  width: 20px;
  height: 4px;
  border-radius: 20px;
  margin: 10px auto 0px;
  background: #1890ff;
}
.navs div a p:last-child{
  height: 20px;
  line-height: 20px;
}
.navs div a p img{
  width: 7px;
  height: 5px;
}
.navs div a:hover{
  color:rgba(24,144,255,1);
  font-weight: bold;
}
.navs div a:hover p:last-child{
  color:rgba(24,144,255,1);
  display: block;
}
.navs div a.active{
  color:rgba(24,144,255,1);
  font-weight: bold;
}
.logo{
  cursor: pointer;
}
.getInfo{
  cursor: pointer;
  margin-left: 10px;
}
.getInfo img{
  width: 180px;
  height: 50px;
}
.getInfos{
  width: 516px;
  height: 200px;
  position: absolute;
  top: 62px;
  right: 0px;
  z-index: 10;
  background: #ffffff;
  box-sizing: border-box;
  padding: 30px 30px 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 6px 8px 0px rgba(0,0,0,0.10);
}
.getInfos_list{
  width: 152px;
  height: 130px;
  text-align: center;
  cursor: pointer;
}
.getInfos_list li img{
  width: 70px;
  height: 70px;
}
.getInfos_list li:last-child{
  margin-top: 12px;
}
</style>
